<script setup>
import {onMounted, ref, watch} from "vue";
import {Plus} from "@element-plus/icons-vue";
import axios from "axios";
import {ElMessage} from "element-plus";

const dialogVisible =ref(false)
const formData=ref({})
const rules = {
  title: [{ required: true, message: '请输入文章标题', trigger: 'blur' }],
  thumbnail: [{ required: true, message: '请上传缩略图', trigger: 'change' }],
  source: [{ required: true, message: '请选择来源', trigger: 'change' }],
  author: [{ required: true, message: '请选择编辑作者', trigger: 'change' }],
  content: [{ required: true, message: '请输入正文内容', trigger: 'blur' }]
}
const uploadRef=ref(null)
const handleClose =()=>{
  formData.value={}
  imageUrl.value=''
  if (uploadRef.value){
    uploadRef.value.clearFiles();
  }
  dialogVisible.value=false
  emits("dialogVisible",dialogVisible.value)
}
const props =defineProps({
  visible: {
    type: Boolean,
    required: false,
    default: false
  },
  news: {
    type: Object,
    required: false,
    default: () => {}
  }
})
watch(()=>props.visible,(newValue)=>{
  dialogVisible.value=newValue;
})
watch(()=>props.news,(newValue)=>{
  formData.value=newValue;
  imageUrl.value=newValue.thumbnail;

})
const emits=defineEmits("")
const authorOptions =ref([])
const getAuthors=()=>{
  axios.get("/news/getAuthors").then(resp=>{
    authorOptions.value=resp.data.map((item,index)=>({
      label:item.author,
      value:item.author
    }))
  })
}
onMounted(()=>{
  getAuthors();
})
const imageUrl=ref('')
const handleAvatarSuccess =(resp,uploadFile)=>{
  imageUrl.value=resp;
  formData.value.thumbnail=resp;
  ElMessage.success("上传成功")
}
const beforeAvatarUpload = (rawFile) => {
  if (rawFile.type !== 'image/jpeg' && rawFile.type !== 'image/png' && rawFile.type!=='image/webp') {
    ElMessage.error('您上传的头像必须是jpg或者png格式')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('您上传的图片大小必须2M以内')
    return false
  }
  return true
}
const submitForm =()=>{
    axios.post("/news/saveOrEditNews",formData.value).then(resp=>{
      ElMessage.success(resp.data)
      dialogVisible.value=false
    })
}
</script>

<template>
  <div>
    <!-- 添加资讯弹窗 -->
    <el-dialog
        v-model="dialogVisible"
        title="添加资讯"
        width="70%"
        :before-close="handleClose"
    >
      <el-form
          ref="formRef"
          :model="formData"
          :rules="rules"
          label-width="100px"
      >
        <!-- 文章标题 -->
        <el-form-item label="文章标题" prop="title">
          <el-input v-model="formData.title" placeholder="请输入文章标题" />
        </el-form-item>

        <!-- 缩略图上传 -->
        <el-form-item label="缩略图" prop="thumbnail">
          <el-upload
              ref="uploadRef"
              class="avatar-uploader"
              action="http://localhost:8080/api/upload"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" alt=""/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus></Plus>
            </el-icon>
          </el-upload>
        </el-form-item>

        <!-- 来源单选按钮 -->
        <el-form-item label="来源" prop="source">
          <el-radio-group v-model="formData.source">
            <el-radio label="平台原创">平台原创</el-radio>
            <el-radio label="网络转载">网络转载</el-radio>
          </el-radio-group>
        </el-form-item>

        <!-- 编辑作者下拉框 -->
        <el-form-item label="编辑作者" prop="author">
          <el-select v-model="formData.author" placeholder="请选择编辑作者">
            <el-option
                v-for="item in authorOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
            />
          </el-select>
        </el-form-item>

        <!-- 正文框 -->
        <el-form-item label="正文" prop="content">
          <el-input
              v-model="formData.content"
              type="textarea"
              :rows="10"
              placeholder="请输入正文内容"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="submitForm">确认</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.avatar-uploader .el-upload {
  border: 1px dashed lightgray;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: gray;
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>